<template>
  <Headerbar />
  <div class="forum-detail" v-if="loading">
    <div class="left">
      <n-skeleton height="200px" width="100%" :sharp="false"></n-skeleton>
      <div class="mt-3"></div>
      <n-skeleton text :repeat="5" /> <n-skeleton text style="width: 60%" />
      <div class="mt-10"></div>
      <n-skeleton circle size="medium" />
      <n-skeleton text :repeat="2" /> <n-skeleton text style="width: 60%" />
      <n-skeleton circle size="medium" class="mt-4" />
      <n-skeleton text :repeat="2" /> <n-skeleton text style="width: 60%" />
    </div>
    <div class="right">
      <n-skeleton height="200px" width="100%" :sharp="false"></n-skeleton>
    </div>
  </div>
  <div class="forum-detail" v-else>
    <div class="left">
      <n-card class="card">
        <div v-if="questionData.solved">
          <div class="triangle-topright"></div>
          <n-icon :size="31" class="triangle-text">
            <svg
              t="1636889271026"
              class="icon"
              viewBox="0 0 1357 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2425"
              width="400"
              height="400"
            >
              <path
                d="M1296.749468 244.39132c26.802989-27.289989 40.869983-61.350975 42.479983-101.796958 1.322999-40.769983-11.093995-74.833969-38.255985-102.476958-26.479989-27.286989-59.479976-40.771983-98.085959-40.092984-38.930984 1-71.92997 14.837994-98.41396 42.448983L473.329806 689.969137 256.184895 469.534227c-26.479989-27.642989-59.510976-41.801983-98.41096-42.479982-38.576984-1-71.609971 12.483995-98.123959 40.123983-27.124989 27.642989-40.541983 59.996975-41.510983 97.41496-1 37.736985 12.417995 70.440971 39.256983 97.73296l310.941873 321.555868c26.838989 27.287989 61.832975 40.767983 104.991957 40.093984 43.189982-1.003 78.476968-14.808994 104.959957-42.446983l-8.482997 9.094997L1296.749468 244.39032z"
                p-id="2426"
                fill="#ffffff"
              ></path>
            </svg>
          </n-icon>
        </div>
        <img
          :src="
            questionData.image && questionData.image !== 'null'
              ? questionData.image
              : defaultImg
          "
          alt="封面图片"
          class="cover"
        />
        <div class="head">
          <!-- 标题 -->
          <div class="title">
            {{ questionData.title }}
          </div>
          <!-- 用户信息 -->
          <div class="author">
            <n-avatar
              class="avatar"
              circle
              :src="questionData.avatar"
              object-fit="fill"
            />
            <div class="username" @click="visitProfile">
              {{ questionData.username }}
            </div>
            <div class="date">
              发布时间：
              <n-time
                :time="new Date(questionData.createTime)"
                type="datetime"
              />
              <n-divider vertical></n-divider>
              收藏量： {{ questionData.likeCount }}
              <n-divider vertical></n-divider>
              浏览量： {{ questionData.viewCount }}
            </div>
            <!-- 收藏 -->
            <n-button
              class="like chip"
              ghost
              @click="likeQ"
              :loading="likeLoading"
              type="primary"
            >
              <template #icon>
                <n-icon v-if="questionData.liked === 1">
                  <Bookmark16Filled></Bookmark16Filled>
                </n-icon>
                <n-icon v-else>
                  <Bookmark16Regular></Bookmark16Regular>
                </n-icon>
              </template>
              <span v-if="questionData.liked === 1"> 已收藏 </span>
              <span v-else> 收藏 </span>
            </n-button>
            <div class="options" v-if="isHost">
              <div @click="editQ">编辑求助</div>
              <div class="divider">|</div>
              <n-popconfirm @positive-click="deleteQ">
                <template #trigger>
                  <div>删除求助</div>
                </template>
                是否确定要删除当前求助？删除后将可能无法获得他人帮助
              </n-popconfirm>
            </div>
            <!-- <div class="options" v-else>
              <div @click="reportQ">举报</div>
            </div> -->
          </div>
        </div>
        <!-- 求助内容 -->
        <div class="content">
          {{ questionData.content }}
        </div>
        <n-space class="tag">
          <div
            class="bar-text"
            style="font-size: 0.8rem; font-weight: bold; margin-top: 5px"
            v-if="questionData.mentions && questionData.mentions.length > 0"
          >
            关联学术成果：
          </div>
          <template v-for="m in questionData.mentions" :key="m.id">
            <n-tag type="info" @click="goToA(m)" style="cursor: pointer">
              {{ m.name }}
            </n-tag>
          </template>
        </n-space>
        <n-space class="tag">
          <div
            class="bar-text"
            style="font-size: 0.8rem; font-weight: bold; margin-top: 5px"
          >
            分类：
          </div>
          <template v-for="(t, index) in questionData.tags" :key="index">
            <n-tag type="warning">
              {{ t }}
            </n-tag>
          </template>
          <div
            style="
              font-size: 0.8rem;
              font-weight: bold;
              margin-top: 5px;
              color: #999;
            "
            v-if="questionData.tags && questionData.tags.length <= 0"
          >
            暂无分类
          </div>
        </n-space>
      </n-card>
      <n-card class="card head answerArea">
        <!-- 回答 -->
        <comment-list :id="props.id"></comment-list>
      </n-card>
    </div>
    <div class="right">
      <info-card class="card" :id="questionData.authorId"></info-card>
    </div>
  </div>
  <img
    src="@/assets/bg/cheese-02.png"
    class="fixed right-0 bottom-0 -z-10 w-[466px] h-[285px]"
  />
</template>

<script setup>
import InfoCard from './components/InfoCard.vue'
import {
  Comment12Regular,
  Comment12Filled,
  Heart16Filled,
  Heart16Regular,
  Bookmark16Regular,
  Bookmark16Filled
} from '@vicons/fluent'
import { EyeOutline } from '@vicons/ionicons5'
// import useMention from '@/utils/mention'
import api from '@/api/api'
const { Help } = api
// const { mentionList, getMentionList } = useMention()

const loading = ref(true)

const message = useMessage()

const router = useRouter()

const props = defineProps({
  id: String
})
//TODO change default
const defaultImg =
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F0022GRovly1gvpgv5kzf3j60np0dc3zp02.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639009705&t=dba70cb61d7f1dd30faa5d33669eccfd'

onMounted(() => {
  Help.getDetail({
    id: props.id
  }).then((res) => {
    loading.value = false
    if (res.success) {
      questionData.value = res.data
      // 空格分隔
      questionData.value.tags = questionData.value.tags

      if (questionData.value.authorId === localStorage.getItem('id')) {
        isHost.value = true
      } else {
        isHost.value = false
      }

      // mention列表处理
      // if (questionData.value.mentions) {
      //   getMentionList(questionData.value.mentions)
      // }

      // 锚点跳转
      if (window.location.hash) {
        setTimeout(() => {
          document.querySelector(window.location.hash).scrollIntoView({
            behavior: 'smooth'
          })
        }, 1000)
      }
    } else {
      message.error('错误访问')
      // router.go(-1)
    }
  })
})

const notification = useNotification()

// 是否是求助的发布者
const isHost = ref(false)
provide('isHost', isHost)
// 编辑
const editQ = () => {
  router.push('/forum/create/' + props.id)
}
// 删除
const deleteQ = () => {
  Help.deleteHelp({
    id: props.id
  }).then((res) => {
    if (res.success) {
      notification.success({
        title: '提示',
        content: '成功删除求助',
        duration: 1000
      })
      router.push('/forum/list/0')
    } else {
      message.error('删除失败')
    }
  })
}
// 举报
const showReport = ref(false)
const confirmReport = () => {
  Help.report({
    id: props.id,
    type: 0,
    reportReason: reportReason.value
  }).then((res) => {
    console.log(res)
    if (res.success) {
      message.success('举报成功！')
    } else {
      message.info('举报错误')
    }
  })
}
const reportReason = ref('')
const reportQ = () => {
  showReport.value = true
}
// 设置收藏
const likeQ = () => {
  likeLoading.value = true
  if (questionData.value.liked) {
    questionData.value.likeCount--
  } else {
    questionData.value.likeCount++
  }
  Help.likeHelp({
    id: props.id,
    likeStatus: questionData.value.liked ? -1 : 1
  }).then((res) => {
    likeLoading.value = false
    if (res.success) {
      questionData.value.liked = res.data.likeStatus
      // if (res.data.likeStatus === 1) {
      //   message.success('收藏成功！')
      // } else {
      //   message.info('已取消收藏')
      // }
    } else {
      message.error('操作失败')
    }
  })
}
const likeLoading = ref(false)

// 求助的信息
const questionData = ref({
  id: 1,
  authorId: 1,
  createTime: '2021-11-11',
  username: 'Zeiion',
  avatar: 'https://img1.baidu.com/it/u=2240604365,2433205074&fm=26&fmt=auto',
  title: 'How to use eslint to forbid the unwanted value appear in code?',
  content:
    'We are implementing an access control module in our project. When a user login to the system, his permission will be loaded according to his role. And the software will decide what he can do only based on the permission list instead of who he is or what his role is.In order to ensure the codes strictly respect the design, I want to add some eslint rule to avoid specific values to appear in specific source files.For example, the following code should not be allowed',
  image:
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F0022GRovly1gvpgv5kzf3j60np0dc3zp02.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639009705&t=dba70cb61d7f1dd30faa5d33669eccfd',
  answerCount: 13,
  viewCount: 422,
  likeCount: 23,
  liked: true,
  solved: false,
  mentions: [],
  tags: ['文献', 'AI']
})
provide('solved', questionData.value.solved)

const getName = (id) => {
  let ret = ''
  User.getName({
    id: id
  }).then((res) => {
    console.log('res.data.name: ', res.data.name)
    ret = res.data.name
  })
  console.log('ret: ', ret)
  return ret
}
const visitProfile = () => {
  window.open('/profile/' + questionData.value.authorId)
}
// 跳转到学术成果
const goToA = (m) => {
  router.push('/research/detail/' + m.id)
}
</script>

<style scoped lang="scss">
.forum-detail {
  display: flex;
  justify-content: center;
  padding: 6vh 5vw 0;
  .left {
    width: 60vw;
    margin: 0 2vw;
  }

  .right {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 5vh;
    width: 28vw;
    height: 20vh;
  }
}

.avatar {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 30px;
  .triangle-topright {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 11vh solid;
    border-left: 6vw solid transparent;
    color: #65973f;
  }
  .triangle-text {
    color: white;
    z-index: 100;
    position: absolute;
    right: 0.5vw;
    top: 1.2vh;
  }
}

:deep(.n-card) > .n-card__content:first-child,
.n-card > .n-card__footer:first-child {
  padding: 0;
}

.head {
  padding: 30px 30px 8px;
  width: 100%;
  box-sizing: border-box;
  overflow: hIdden;
  border-bottom: 1px solid #eee;
}

.title {
  font-weight: bold;
  font-size: 28px;
  line-height: 37px;
  margin-bottom: 20px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hIdden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.author {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-bottom: 5px;
}

.username {
  color: #4480c9;
  cursor: pointer;
  margin: 0 20px 0 10px;
}

.date {
  font-size: 13px;
  color: rgb(136, 136, 136);
  position: relative;
}

.options {
  position: absolute;
  right: 30px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  display: flex;
  .divider {
    margin: 0 10px;
    color: #ccc;
  }
}

.content {
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 23px;
  word-break: break-all;
  padding: 0 30px;
  box-sizing: border-box;
}
.tag {
  padding: 0px 30px 12px;
}
.cover {
  width: 100%;
  height: 18em;
  object-fit: cover;
}
.like {
  margin-left: 15px;
}
.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

.zoom-enter,
.zoom-leave-to {
  transition: all 0.15s ease-out;
  transform: scale(1);
}

.zoom-enter-to,
.zoom-leave {
  transition: all 0.2s ease-out;
  transform: scale(1.05);
}
@media screen and (max-width: 992px) {
  .forum-detail {
    padding: 0;
  }
  .right {
    display: none;
  }
  .left {
    width: 100vw !important;
    margin: 0 !important;
    .card {
      margin-bottom: 0;
      box-shadow: none;
      border-radius: 0;
    }
  }
}
.bar-text {
  position: relative;
  padding-left: 10px;
}
.bar-text::before {
  background-color: #ffa055;
  content: '';
  width: 5px;
  height: 90%;
  border-radius: 5px;
  transition: background-color 0.3s;
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
</style>
